<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae delectus amet, odit eos maiores excepturi velit tenetur rem dolorem iusto culpa adipisci debitis praesentium perferendis quibusdam rerum consequuntur veritatis eligendi?</p>
		<div><span>lorem</span></div>
		<div style="width: 100px; height: 100px; background: black;"></div>
		<span>文本</span>
		<br />
		<input type="button" value="按钮2">
		<input type="text" />
		<script>
			/* javaScript:基础语法+（重）DOM(页面)+BOM(浏览器)
			   JQuery操作DOM方式【7方式；36个函数】--改变页面效果
-----------------------------------------------------------------------------------
			1.元素内容操作：操作元素和元素内容的方式【3个函数（必记）】
			.html()
			.val()
			.text()
			2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
			.attr()
			.removeAtter()
			.prop()
			.removeProp()
			3.元素类名操作：操作css类样式【4个函数】
			.addClass()
			.removeClass()
			.toggleClass()
			.hasClass()
			4.元素样式【位置】操作：【5个函数】
			css()
			width()和height()
			outerWidth()和outerHeight()
			5.元素删除和插入操作：【7个函数】
			append()和prepend()
			after()和before()
			remove()和empty()
			replaceWith()
			6.元素便利操作：【6个函数】
			children()和parent()
			siblings()
			next()和prev()
			each()
			7.动画操作：【7个函数】
			show()和hide()
			slideDown()和slideUp()
			fadeIn()和fadeOut()
			hover()
			大作业：tab选项卡
			BOM：浏览器对象模型，学习7个对象方法使用。
			*/
			$("div").mouseenter(function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数：增加一个元素，覆盖原来的html
			.val()函数 imput元素使用 改变修改表单元素中的文本
			*/
		 //   $('button').click(function(){
			// //DOM上的操作--改变页面其他元素
			// //DOM操作---改变p元素改成marquee元素
			//  $('p').html("<marquee>醉卧沙场君莫笑</marquee>");
		 //   });
		   /*100*100的框 div 鼠标移动上去，改变下面超文本
		     按钮和输入框，点击按钮，输入框输出文字效果
		   */
		  // $('div').mouseenter(function(){
			 //  $('span').html("<a>hhhh</a>");
		  // });
		   $("input[type='button']").click(function(){
			  $("input[type='text']").val("文本框输出效果")
		   });
		</script>
	</body>
</html>